<script>
import { mapState } from 'vuex'

export default {
  name: 'index',
  computed: {
    // 动态计算高度
    cssVar() {
      return {
        'height': document.documentElement.clientHeight + 'px'
      }
    },
    // 获取性别
    ...mapState({
      gender: state => state.info.gender
    })
  },
  methods: {
    changePage() {
      this.$router.push({
        path: '/library'
      })
    }
  }
}
</script>

<template>
  <div v-swipeup="changePage">
    <!--  假设gender 1 为男 2 为女  -->
    <div :class="gender === 1 ? 'network-boy' : 'network-girl'" :style="cssVar" @click="changePage"></div>
  </div>
</template>

<style scoped>
.network-boy{
  background: url("../../assets/images/network/boy.jpg") no-repeat;
  background-size: 100% 100%;
}
.network-girl{
  background: url("../../assets/images/network/girl.jpg") no-repeat;
  background-size: 100% 100%;
}
</style>
